import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Col, Row, DatePicker} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";


class QinShiRadarIn extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  state = {
    selectedTime: currentTime(),
    option: {
      legend: {
        data: []
      },
      radar: {
        // shape: 'circle',
        indicator: [
          {name: '270'},
          {name: '225'},
          {name: '180'},
          {name: '135'},
          {name: '90'},
          {name: '45'},
          {name: '0'},
          {name: '315'}
        ]
      },
      series: [
        {
          type: 'radar',
          data: []
        }
      ]
    }
  };


  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'lugang/getRadarDataIn',
      payload: {
        time: dateFormat(this.state.selectedTime)
      }
    });

    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById("qinshiRadarIn"));
    // 绘制图表
    this.state.chart.setOption(this.state.option);
    addResizeHook(this, this.state.chart.resize)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {radarDataIn,} = nextProps;
    const {option, chart} = prevState;

    // 当传入的type发生变化的时候，更新state
    if (chart && radarDataIn && radarDataIn !== prevState.radarDataIn) {
      const {legend, indicator, data} = radarDataIn
      option.series[0].data = data;
      option.series[0].data.label = {
        show: true,
        formatter: function (params) {
          return params.value;
        }
      }

      option.legend.data = legend;
      // option.radar.indicator = indicator;
      chart.setOption(option, true)
      return {radarDataIn}
    }

    return null;
  }

  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  timePick = value => {
    this.state.selectedTime = value.toDate();
    this.props.dispatch({
      type: 'lugang/getRadarDataIn',
      payload: {
        time: dateFormat(this.state.selectedTime)
      }
    })
  };

  render() {
    const {width = 100, height = 350} = this.props;
    const {selectedTime} = this.state
    return (
      <div>

        {/*<RangePicker*/}
        {/*  key={Math.random()} //强制刷新组件*/}
        {/*  style={{width: 400}}*/}
        {/*  showTime={{format: 'HH'}}*/}
        {/*  format={dateFormat}*/}
        {/*  placeholder={['开始时间', '结束时间']}*/}
        {/*  onOk={this.timePick}*/}
        {/*  defaultValue={[moment(displayStartTime, dateFormat), moment(displayEndTime, dateFormat)]}*/}
        {/*/>*/}
        <DatePicker
          showTime
          format="YYYY-MM-DD HH"
          placeholder="选择时间"
          defaultValue={moment(selectedTime, "YYYY-MM-DD HH")}
          key={Math.random()}
          onOk={this.timePick}
          style={{marginBottom: 8}}
        />

        <div id="qinshiRadarIn" style={{width: `${width}%`, height}}/>
      </div>

    )
  }
}

export default connect(({lugang, global}) => ({
  radarDataIn: lugang.radarDataIn,
  global
}))
(QinShiRadarIn);
